<template>
	<div v-loading="loading">
		<el-dialog :title="'合作商户信息'" :visible.sync="dialogVisible">
			<!-- 查询条件 -->
			<div class="conditions">
				<el-select v-model="optionsValue" placeholder="请选择" :disabled="discount ? false : true">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
				<el-button @click="serchBtn" type="primary" style="margin: 0 8px;" :disabled="discount ? false : true">搜索</el-button>
			</div>

			<!-- 表格 -->
			<el-table :data="tableData" border style="width: 100%;margin:16px 0;" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
				<el-table-column prop="cooperateName" label="商户名称" width="180"></el-table-column>
				<el-table-column prop="financingParty" label="出资方" width="180">
					<template slot-scope="scope">
						<p>{{ scope.row.financingParty == 1 ? '本商户' : '合作商户' }}</p>
					</template>
				</el-table-column>
				<el-table-column prop="participationStatus" label="状态">
					<template slot-scope="scope">
						<div v-if="discount">
							<p>{{ scope.row.participationStatus == 2 ? '已参与' : '未参与' }}</p>
							<p v-if="scope.row.financingParty == 1 && !scope.row.needAgree && scope.row.participationStatus == 2" style="color: red;">自动参与</p>
						</div>
						<div v-else>-</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<pagination-direction v-if="paginationConfig.total !== 0" :config="paginationConfig" @sizeschange="sizesChange" @pagechange="pageChange" />
		</el-dialog>
	</div>
</template>

<script>
import { getCooperationBusiness } from '@/api/business';
export default {
	data() {
		return {
			//  弹窗状态组
			loading: false,
			dialogVisible: null,

			// 查询条件
			options: [
				{
					value: '',
					label: '全部'
				},
				{
					value: 1,
					label: '未参与'
				},
				{
					value: 2,
					label: '已参与'
				}
			],
			optionsValue: '',

			// 分页配置
			paginationConfig: {
				direction: 'center', // 分页位置
				layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
				pageSizes: [5, 10], // 分页pages
				total: 0,
				page: 1, // 页数-默认1
				pageSize: 5 // 每页条数-默认10
			},

			// 表格
			tableData: [],
			// 超级会员
			discount: ''
		};
	},
	methods: {
		open(prams) {
			this.dialogVisible = true;
			this.mbDayId = prams.mbDayId;
			this.discount = prams.discount;
			this.getCooperationBusinessFun();
		},
		// 搜索
		serchBtn() {
			this.getCooperationBusinessFun();
		},
		// 分页sizes改变
		sizesChange() {
			this.getCooperationBusinessFun();
		},
		// 分页page改变
		pageChange() {
			this.getCooperationBusinessFun();
		},

		// 获取数据
		getCooperationBusinessFun() {
			let data = {
				id: this.mbDayId,
				status: this.optionsValue,
				pageNum: this.paginationConfig.page,
				pageSize: this.paginationConfig.pageSize
			};
			getCooperationBusiness(data).then(res => {
				this.tableData = res.data.list;
				this.paginationConfig.total = res.data.total;
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/deep/.el-dialog .el-dialog__body {
	padding: 16px 30px 16px 30px !important;
}
</style>
